<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1{
                width:100px;
                height:100px;
                /*
                    按样式设置
                */
                /*border-top-width:2px;*/
                /*border-top-color:red;*/
                /*border-top-style:solid;*/

                /*按样式简写*/
                /*边框宽度*/
                /*border-width:3px;*/
                /*border-width: 3px 4px 5px 6px ;*/
                /*边框的颜色*/
                /*border-color:red;*/
                /*border-color:red green blue;*/

                /*边框线条的样式：solid(实线)、dashed(虚线)、dotted(点状线)、double(双实线)等*/
                /*border-style:double;*/
                /*border-style:double dashed;*/

                /*按方向简写*/
                /*border-top:1px solid red;*/
                /*border-right: 2px dashed yellow;*/
                /*border-bottom:3px double blue;*/
                /*border-left: 4px dotted gray;*/


                /*最终简写border:width style color;*/
                border:1px solid blue;
            }
            .d2{
                width:300px;
                height: 200px;
                background:yellow;
                /*设置圆角*/
                /*border-top-left-radius:30px;*/
                /*border-top-right-radius:50px;*/
                /*border-bottom-right-radius:20px;*/
                /*border-bottom-left-radius:60px;*/

                /*简写方式*/
                /*border-radius:30px;*/
                /*左上  右上   右下   左下*/
                /*border-radius:30px 50px 20px 60px;*/

                /*左上   右上和左下   右下*/
                /*border-radius:30px 80px 60px;*/

                /*左上和右下   右上和左下*/
                border-radius: 30px 70px;
            }
        </style>
    </head>
    <body>
        <div class="d1"></div>
        <div class="d2"></div>
    </body>
</html>